<template>
	<div class='teaching'>
		<!-- 步骤条 -->
		<div class="steps">
			<div
				class="step"
				:class="index === selectStep ? 'active' : ''"
				v-for="(item,index) in videos"
				:key="index"
			>
				<div
					class="number"
					@click="selectStep=index;playing=false"
				>
					{{index+1}}
				</div>
				<div
					v-if="index < videos.length-1"
					class="icon"
				>
					<Iconfont
						name="icon-arrow-right"
						size="10"
						color="#EFF3F3"
					/>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<video
				ref="Video"
				:src="videos[selectStep]"
				controls
			/>
			<Iconfont
				v-if="!playing"
				class="play-icon"
				name="icon-a-Vector11"
				size="80"
				color="#00C9A9"
				@click="onclickPlay"
			/>
		</div>
	</div>
</template>

<script>
let VideoDom

export default {
  props: {
    course: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      videos: this.course.teachingVideo || [],
      selectStep: 0,
      playing: false
    }
  },
  mounted() {
    VideoDom = this.$refs.Video
    VideoDom.onplay = () => {
      this.playing = true
    }
    VideoDom.onpause = () => {
      this.playing = false
    }
    VideoDom.onended = () => {
      this.playing = false
    }
  },
  methods: {
    onclickPlay() {
      VideoDom = this.$refs.Video

      VideoDom.play()
      console.log(VideoDom)
    }
  }
}
</script>

<style lang='scss' scoped>
.teaching {
  .steps {
    display: flex;

    .step {
      display: flex;
      align-items: center;

      .number {
        width: 48px;
        height: 48px;
        line-height: 48px;
        color: rgba(0, 62, 52, 0.1);
        text-align: center;
        cursor: pointer;
        background-color: rgba(0, 201, 169, 0.08);
        border-radius: 50%;
      }

      .icon {
        margin: 0 18px;
      }

      &.active .number {
        color: #ffffff;
        background-color: #00c9a9;
      }
    }
  }

  .content {
    position: relative;
    max-width: 900px;
    margin: 30px 0;
    cursor: pointer;

    video {
      width: 100%;
      min-height: 506.25px;
      border-radius: 16px;
    }

    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .hint {
    font-size: $sSmall;
    color: $color1;
  }
}
</style>
